<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>工资管理系统</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f9f9f9;
            margin: 0;
            padding: 0;
        }
 
        h1 {
            text-align: center;
            color: #333;
            margin-top: 30px;
            margin-bottom: 30px;
        }

        h5 {
            text-align: lift;
            margin-left: 10%; 

        }
 
        a {
            color: #044599;
            text-decoration: none;
            font-weight: bold;
        }
 
        a:hover {
            text-decoration: underline;
        }
 
        table {
            width: 80%;
            margin: 0 auto;
            border-collapse: collapse;
            background-color: #fff;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        }
 
        th, td {
            padding: 10px;
            text-align: left;
        }
 
        th {
            background-color: #044599;
            color: #fff;
            border: 1px solid #02397F;
        }
 
        td {
            border: 1px solid #ECECEC;
            color: #666;
        }
 
        
 
        tr:hover {
            background-color: #ddd;
        }
 
        .actions {
            text-align: center;
        }
 
        .actions a {
            margin: 0 5px;
        }
        .search-form {
            background-color: #fff;
        }
        h5 input[type="text"] {
            height: 25px;
        }
        h5 button {
            height: 30px;
        }
    </style>
</head>
<body>
    <h1>薪酬信息表</h1>
    <div class="actions" method="post">
        <a href="/insert">添加数据</a>
    </div>
    <form action="/search" method="GET">  
        <h5>  
            <input type="text" name="query" placeholder="输入关键字" />  
            <button type="submit">查询</button>  
        </h5>  
    </form>
    </table>
    <table>
        <thead>
            <tr>
                <th>工号</th>
                <th>工作日期</th>
                <th>员工姓名</th>
                <th>身份证号</th>
                <th>工资</th>
                <th>奖金</th>
                <th>联系方式</th>
                <th colspan="2">操作</th>
            </tr>
        </thead>
        <tbody>
            <% data.forEach(function (item, index) { %>
            <tr>
                <td><%= item.id %></td>
                <td><%= item.day %></td>
                <td><%= item.name %></td>
                <td><%= item.idnumber %></td>
                <td><%= item.salary %></td>
                <td><%= item.reward %></td>
                <td><%= item.phonenumber %></td>
                <td class="actions"><a href="/delete/<%= item.id %>">删除</a></td>
                <td class="actions"><a href="/edit/<%= item.id %>">编辑</a></td>
            </tr>
            <% }); %>
        </tbody>
    </table>
</body>
</html>